<!--
    *名称：弹窗的搜索条件组件
    *功能：methods
      1.点击搜索的方法：@search
      2.搜索条件 props : formItemList
-->
<template>
  <div class="dialog-search">
    <el-row>
      <el-form ref="ruleForm" :inline="true" :model="formInline" class="demo-form-inline" label-width="70px" style="display: inline-flex;width: 100%;">
        <div style="max-width: calc(100vw - 380px);float: left;">
          <el-form-item v-for="(item,index) in formItemList" :key="index" :label="item.label">
            <el-select
              v-if="item.type=='select'"
              v-model="formInline[item.param]"
              filterable
              clearable
              placeholder="请选择"
              style="width: 137px;"
              size="mini">
              <el-option v-for="(item2,index2) in item.selectOptions" :key="index2" :label="item2.name" :value="item2.value"/>
            </el-select>
            <!-- 单个input -->
            <el-input v-if="item.type=='input'" v-model="formInline[item.param]" size="mini" style="width: 137px;" placeholder="请输入"/>
            <!-- 两个input -->
            <div v-if="item.type=='inputs'">
              <el-col :span="11">
                <el-input v-model="formInline[item.param]" size="mini" style="width: 64px;"/>
              </el-col>
              <el-col :span="2" class="line" style="text-align: center;">-</el-col>
              <el-col :span="11">
                <el-input v-model="formInline[item.params]" size="mini" style="width: 64px;">
                  <i v-if="item.unit" slot="suffix" class="dw">{{ item.unit }}</i>
                </el-input>
              </el-col>
            </div>
            <!-- :picker-options="item.quick" -->
            <el-date-picker
              v-if="item.type=='DateTimePicke'"
              v-model="formInline[item.param]"
              :type="item.DateTimeType"
              :picker-options="pickerOptions"
              style="width: 354px;"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
            <el-date-picker
              v-if="item.type=='datetime'"
              v-model="formInline[item.param]"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 190px"/>
            <el-date-picker
              v-if="item.type=='daterange'"
              v-model="formInline[item.param]"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 180px"/>
            <span v-if="item.type=='daterange'">-</span>
            <el-date-picker
              v-if="item.type=='daterange'"
              v-model="formInline[item.params]"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 180px"/>
          </el-form-item>
        </div>
        <div style="min-width: 120px;float: right;">
          <el-form-item>
            <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item v-if="isReset">
            <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
          <el-form-item v-if="added">
            <el-button size="mini" type="success" @click="newlyAdded">新增</el-button>
          </el-form-item>
          <el-form-item v-if="exportlist">
            <el-button size="mini" @click="exportForm">导出</el-button>
          </el-form-item>
          <!-- 可用于显示其他按钮 -->
          <el-form-item>
            <slot/>
          </el-form-item>
        </div>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { pickerOptions } from "@/lib/commonVar";
export default {
  name: "BaseSearch",
  props: {
    isReset: {
      type: Boolean,
      default: true
    },
    added: {
      type: Boolean,
      default: false
    },
    exportlist: {
      type: Boolean,
      default: false
    },
    emitSearch: {
      // 是否立即执行搜索
      type: Boolean,
      default: false
    },
    formItemList: {
      type: Array,
      default() {
        return [
          {
            label: "下拉框", // 条件名称
            type: "select", // 标签
            selectOptions: [{ name: 111, value: 111 }],
            param: "company", // 参数名称
            defaultSelect: "222" // 下拉框默认选中项
          },
          {
            label: "输入框",
            type: "input",
            param: "name"
          },
          {
            label: "日期时间选择器",
            type: "DateTimePicke",
            param: "time",
            DateTimeType: "datetimerange",
            quick: "pickerOptions"
          }
        ];
      }
    }
  },
  data() {
    const formInline = {};
    for (const obj of this.formItemList) {
      formInline[obj.param] = obj.defaultSelect || "";
      if (obj.params !== undefined) {
        formInline[obj.params] = obj.defaultSelects || "";
      }
    }
    return {
      formInline,
      pickerOptions: pickerOptions,
      selectedTypeLabel: "",
      typeOptions: []
    };
  },
  watch: {
    formItemList: {
      handler(newVal, oldVal) {
        for (const obj of this.formItemList) {
          if (obj.defaultSelect) {
            this.formInline[obj.param] = obj.defaultSelect;
            if (obj.params !== undefined) {
              this.formInline[obj.params] = obj.defaultSelects;
            }
          }
        }
      },
      deep: true,
      immediate: true
    },
    emitSearch: {
      // 是否立即触发搜索  用在弹窗中异步请求下拉框后  或者给下拉框赋值默认值后  需要用到这个方法
      handler(newVal, oldVal) {
        if (newVal) {
          console.log("此时触发--立即执行搜索");
          this.$emit("search", this.formInline);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$emit("search", this.formInline);
  },
  methods: {
    onSubmit() {
      // console.log('submit!',this.formInline);
      this.$emit("search", this.formInline);
    },
    // 新增
    newlyAdded() {
      this.$emit("Added");
    },
    // 导出
    exportForm() {
      this.$emit("exportlist", this.formInline);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // const formInline = {}
      for (var key in this.formInline) {
        this.formInline[key] = "";
      }
      /* for (const obj of this.formItemList) {
        // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
        formInline[obj.param] = '' // 所有筛选条件清空
      }*/
      // this.formInline = formInline

      this.$emit("search", this.formInline);
    }
  }
};
</script>
<style scoped>
/deep/.el-date-editor--datetimerange .el-range-input {
  padding: 2px 0px;
}
/deep/.dw {
  font-style: normal;
  font-weight: bold;
}
</style>
<!--<style scoped>
.el-form-item>>>.el-form-item__label{
  padding: 0 12px 0 12px !important;
}
.el-form-item>>>.el-form-item__label{
  background: #1A367A !important;
}
.el-input>>>.el-input__inner{
  height: 25px !important;
  border: 0;
  border-radius:0
}
.el-select .el-form-item>>>.el-input__inner{
  height: 25px !important;
  border: 0;
  border-radius:0
}
.el-form-item>>>.el-input__inner{
  border: 0;
  border-radius:0;
  height: 25px;
  background-color: aliceblue;
  color: black !important;
}
.el-form-item>>>.el-form-item__label{
  line-height: 25px !important;
}
.el-form-item>>>.el-form-item__content{
  line-height: 28px !important;
}
.el-date-editor>>>.el-range-input{
height: 25PX;
}
.el-button{
  padding: 5.5px 20px;
  border-radius: 0;
}
.el-form-item{
  padding: 5px 0 5px;
}
.el-date-editor >>>.el-range-input{
  background-color: aliceblue !important;
  border:none;
  color: black !important;
}
.el-input__icon >>>span{
  color: black !important;
}
</style>-->
